<template>
    <s-layout title="物流查询">
        <view class="content">
            <view class="card">
                <view class="inner">
                    <view class="card-left">
                        <view class="sys-no"
                            >{{state.listinfo.express_name}} {{state.listinfo.express_no}}</view>
                        <view class="sys-ttl">
                            {{state.listinfo.goods_title}}
                        </view>
                    </view>
                    <view class="card-right">
                        <view class="btn" @click="copyAddr(state.listinfo.express_no)">
                            复制
                        </view>
                        <image src="@/static/arrow.png" class="arrow" @click="showLogistics"></image
                        >
                    </view>
                </view>
                <zfl-logistics :list="state.listinfo.list" v-if="state.isShow"></zfl-logistics>
            </view>
        </view>
        <!-- <s-empty icon="/static/copy.png" text="暂无商品">
        </s-empty> -->
    </s-layout>
</template>

<script setup>
    import { reactive } from 'vue';
    import { onLoad, onReachBottom } from '@dcloudio/uni-app';
    import sheep from '@/sheep';
    import {copyText} from '@/sheep/helper/index';

    const state = reactive({
        keyword: '',
        list: [],
        page: 1,
        pageSize: 20,
        loadStatus: 'noMore',
        listinfo: {},
        isShow: false
    });

    function toAddMember() {
        sheep.$router.go('/manage/pages/member/add');
    }

    function toDetail(id) {
        sheep.$router.go('/manage/pages/member/detail', { id });
    }

    function getDetail(item) {
        const data = JSON.parse(item)
        console.log('data', data)
        state.listinfo = data
        state.listinfo.list = data.list.map((item) => {
            return {
                status: item.content,
                time: item.change_date,
                description: ''
            }
        })
    }
    
    function copyAddr(addr){
        copyText(addr)
    }
    
    function showLogistics(){
        state.isShow = !state.isShow
    }

    onLoad((options) => {
        getDetail(options.item);
    });
</script>

<style lang="scss" scoped>
    .content {
        padding: 28rpx;

        .card {
            padding-right: 80rpx;
            display: flex;
            flex-direction: column;
            background-color: #fff;
            border-radius: 24rpx;
            padding: 20rpx;
            margin-bottom: 24rpx;
            position: relative;
            // &:before {
            //     margin-top: -10rpx;
            //     background: url('@/static/arrow.png') no-repeat right center;
            //     background-size: 20rpx;
            //     transform: rotate(90deg);
            //     position: absolute;
            //     width: 20rpx;
            //     height: 20rpx;
            //     right: 20rpx;
            //     top: 50%;
            //     content: '';
            // }
            .inner {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .card-left {
                padding: 10rpx;
                color: #000;
                font-size: 20rpx;
                border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
                .sys-no {
                    display: flex;
                    align-items: center;
                }
                .sys-ttl {
                    margin-top: 10rpx;
                    color: #666;
                }
            }
            .card-right {
                margin-top: 10rpx;
                padding: 20rpx;
                font-size: 24rpx;
                display: flex;
                align-items: center;
                .arrow {
                    margin-left: 20rpx;
                    width: 20rpx;
                    height: 20rpx;
                    transform: rotate(90deg);
                }
                .btn {
                    color: #666;
                    font-size: 20rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                    padding: 0 20rpx;
                    border-radius: 20rpx;
                    background-color: #EFEEEC;
                }
            }
        }
    }
</style>
